<template>
    <div class="cont">
        <nav-bar title="个人号导购" rightImg="https://h5.dhcc.wang/newprogram/wxRobot/nav_refresh_black.png" :bgStyle="bgStyle"
            text-color="#333333" :rotate.sync="reload" @leftClick="back" @rightClick="refresh" />
        <main class="main">
            <!-- <van-notice-bar mode="link" @click="clickTip">功能详解与使用帮助</van-notice-bar> -->
            <!-- <div class="flex align-center m-lr-15 m-t-20 font-14">
                <van-icon class="m-r-5" size="26" name="friends-o" />
                群聊自动回复
            </div>
            <div class="bg-white m-lr-15 p-lr-12 radius4 m-t-10">
                <div class="flex align-center p-tb-15 justify-between">
                    <div>开启商品搜索自动给回复</div>
                    <van-switch class="m-l-10" size="20" v-model="value1" :active-color="config.mac_assist_color"
                        @change="switchChange(1)" />
                </div>
                <div class="flex align-center justify-between p-tb-15 van-hairline--top">
                    <div>开启淘口令自动给回复</div>
                    <van-switch class="m-l-10" size="20" v-model="value2" :active-color="config.mac_assist_color"
                        @change="switchChange(2)" />
                </div>
            </div> -->
            <div class="flex align-center p-tb-12 justify-between m-l-10 m-r-10 m-t-10 radius8 bg-white">
                <div class="m-l-10 text-bold">是否开启功能（仅支持私聊）</div>
                <van-switch class="m-r-10" size="20" v-model="value3" :active-color="robotCfg.mac_assist_color"
                @change="switchChange" />
            </div>
            <!-- <div class="flex align-center m-lr-15 m-t-20 font-14">
                <van-icon class="m-r-5" size="22" name="manager-o" />
                私聊自动回复
            </div>
            <div class="bg-white m-lr-15 p-lr-12 radius4 m-t-10">
                <div class="flex align-center p-tb-15 justify-between">
                    <div>开启商品搜索自动给回复</div>
                    <van-switch class="m-l-10" size="20" v-model="value3" :active-color="robotCfg.mac_assist_color"
                        @change="switchChange" />
                </div>
                <div class="flex align-center justify-between p-tb-15 van-hairline--top">
                    <div>开启智能识别转链回复</div>
                    <van-switch class="m-l-10" size="20" v-model="value4" :active-color="robotCfg.mac_assist_color"
                        @change="switchChange" />
                </div>
            </div> -->
        </main>
        <!-- 提示 -->
        <div class="m-t-10 m-l-10 m-r-10">
            <div class="p-10">
                <div class="font-14 color-0">
                    根据指令商品泛搜索
                </div>
                <div class="m-t-10 font-12 color-6">
                    开启后，当私聊中用户发送 <span class="color-red">搜+关键词</span>，系统将自动
                    返回商品查询结果，用户可点击链接查看商品列表
                    例如：搜卫衣、搜辣条等
                </div>
                <div class="m-t-10">
                    <img src="https://img.huajuanyun.com/utools/2023/1128/1701154255710.png" width="100%" class="radius8">
                </div>
                <div class="m-t-20 font-14 color-0">精准商品智能识别转链</div>
                <div class="m-t-10 font-12 color-6">
                    开启后，当私聊中用户发送 <span class="color-red">口令/链接等</span>，系统将自动
                    返回转链后的口令/链接，用户复制口令/链接下单，即可给您计佣
                </div>
                <div class="m-t-10">
                    <img src="https://img.huajuanyun.com/utools/2023/1128/1701154346457.png" width="100%" class="radius8">
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { Switch, Popup, NoticeBar, Button } from 'vant'
export default {
    components: {
        [Switch.name]: Switch,
        [Popup.name]: Popup,
        [NoticeBar.name]: NoticeBar,
        [Button.name]: Button
    },
    data() {
        return {
            robotCfg: this.$DB.get('robotCfg'),
            reload: false,
            bgStyle: '#fff',
            welcome: '',
            showTip: false,
            value1: false,
            value2: false,
            value3: false,
            value4: false
        }
    },
    mounted() {
        this.setHeader()
        this.init()
    },
    methods: {
        init() {
            this.$api.getContactDetail({ username: this.robotCfg.device_info.bind_wechat }, true).then(async res => {
                if (res.code != 1) {
                    this.$dialog.alert({
                        title: '温馨提示',
                        message: res.msg
                    }).then(() => {
                        this.back()
                    })
                    return
                }
                this.value3 = res.data.is_keyword_reply
                this.value4 = res.data.is_keyword_reply
            }).finally(() => {
                setTimeout(() => {
                    this.reload = false
                }, 500)
            })
        },
        refresh() {
            this.reload = true
            this.init()
        },
        back() {
            this.$router.go(-1)
        },
        setHeader() {
            this.$common.setHeader({
                native_headershow: 0,
                topstyle: 'topcolor',
                native_top_words_color: '#ffffff',
                str_link_color: '#ffffff',
                end_link_color: '#ffffff'
            })
        },
        // 欢迎语
        clickTip() {
            this.showTip = true
        },
        closeTip() {
            this.showTip = false
        },
        switchChange(e) {
            console.log(e)
            this.$api.privateReplyStatus({ status: e ? 1 : 0 }).then(res => {
                console.log(res)
                if (res.code != 1) {
                    this.value3 = e ? false : true
                    this.value4 = e ? false : true
                    return this.$toast(res.msg)
                }
                this.value3 = e
                this.value4 = e
                this.$toast('设置成功')
            })
        }
    }
}
</script>
<style lang="less" scoped>
.cont {
    font-size: 14px;
    padding-top: 46px;
}
</style>